﻿<!Doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>
<script src="js/d3.v3.js"></script>
<script>
	var nodes = [
		{ name: "GuiLin"},
		{ name: "GuangZhou" },
		{ name: "XiaMen"    },
		{ name: "HangZhou"   },
		{ name: "ShangHai"   },
		{ name: "QingDao"    },
		{ name: "TianJin"    },
		{ name: "BeiJing"    },
		{ name: "ChangChun"  },
		{ name: "XiAn"       },
		{ name: "WuluMuQi"  },
		{ name: "LaSa"       },
		{ name: "ChengDu"    }
	];
	var edges = [
		{ source : 0  , target: 1 } ,
		{ source : 0  , target: 2 } ,
		{ source : 0  , target: 3 } ,
		{ source : 0  , target: 4 } ,
		{ source : 0  , target: 5 } ,
		{ source : 0  , target: 6 } ,
		{ source : 0  , target: 7 } ,
		{ source : 0  , target: 8 } ,
		{ source : 0  , target: 9 } ,
		{ source : 0  , target: 10 } ,
		{ source : 0 , target: 11 } ,
		{ source : 0 , target: 12 }
	];
	var width =1000;
	var height = 600;
//	var bord= "1px solid red";
//	console.log(edges);
	var svg = d3.select("body").append("svg")
			.attr("width",width)
			.attr("height",height);

	var force = d3.layout.force()
			.nodes(nodes)
			.links(edges)
			.size([width,height])
			.linkDistance(200)
			.charge([-100])
			.start();
	var color = d3.scale.category20();
	var svg_edges = svg.selectAll("path.line")
			.data(edges)
			.enter()
			.append("path")
			.style("stroke",function(d,i){
				return color(i+1);
			})
			.attr("class","line")
			.attr("id",function(d,i){return "line"+i})

			.style("stroke-width",1);

	var svg_mark=svg.selectAll("circle.mark")
			.data(edges)
			.enter()
			.append("circle")
			.attr("r",12)
			.attr("class","mark")

			.style("fill",function(d,i){
				return color(i+1);
			})
	//var mark_path=svg_mark.append("animateMotion").attr("dur","3s").attr("begin","0s").attr("repeatCount","indefinite");
	var mpath=svg_mark.append("animateMotion").attr("path",function(d){

		return "M0,0L"+(d.target.x-d.source.x)+","+ (d.target.y-d.source.y);
		// return "M"+d.source.x+","+ d.source.y+"L"+d.target.x+","+ d.target.y;
	}).attr("dur","3s").attr("begin","0s").attr("repeatCount","indefinite");//.append("mpath").attr("xlink:href",function(d,i){return "#line"+i});
	var svg_nodes = svg.selectAll("circle.node")
			.data(nodes)
			.enter()
			.append("circle")
			.attr("r",10)
			.attr("class","node")
			.style("fill",function(d,i){
				return color(i);
			})
			.call(force.drag);

	force.on("tick", function(){
		/*svg_mark.attr("cx",function(d){ return d.source.x; });
		 svg_mark.attr("cy",function(d){ return d.source.y; });
		 */

		svg_mark.attr("transform", function(d) {
			return "translate(" + d.source.x+ "," +d.source.y+ ")";
		});
		mpath.attr("path",function(d){

			return "M0,0L"+(d.target.x-d.source.x)+","+ (d.target.y-d.source.y);
		})
		/*mark_path.attr("path",function(d){
		 return "M "+d.source.x+" "+ d.source.y+" "+"L "+d.target.x+" "+d.target.y
		 })*/
		svg_edges.attr("d",function(d){
			return "M "+d.source.x+" "+ d.source.y+" "+"L "+d.target.x+" "+d.target.y
		})
		/*svg_edges.attr("x1",function(d){ return d.source.x; });
		 svg_edges.attr("y1",function(d){ return d.source.y; });
		 svg_edges.attr("x2",function(d){ return d.target.x; });
		 svg_edges.attr("y2",function(d){ return d.target.y; });
		 */
		svg_nodes.attr("cx",function(d){ return d.x; });
		svg_nodes.attr("cy",function(d){ return d.y; });
	});
</script>
